import * as React from "react"
import { View, Text, Image, TouchableOpacity } from "react-native"
import { px2dp } from "@/utils"
import { color } from "@/theme"
import { images } from "@/assets"

interface HomeItemHeadViewP {
  item?: any
}

export default class HomeItemHeadView extends React.Component<HomeItemHeadViewP, {}> {
  render() {
    return (
      <View
        style={{
          borderTopLeftRadius: px2dp(8),
          borderTopRightRadius: px2dp(8),
          marginTop: px2dp(4),
          backgroundColor: color.palette.white
        }}
      >
        <View
          style={{ justifyContent: "space-between", flexDirection: "row", alignItems: "center" }}
        >
          <Text
            style={{
              fontSize: px2dp(14),
              color: color.palette.black,
              marginStart: px2dp(28),
              marginTop: px2dp(12),
              marginBottom: px2dp(12)
            }}
          >
            {this.props.item.title}
          </Text>
          <TouchableOpacity>
            <View
              style={{
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "center",
                marginEnd: px2dp(32)
              }}
            >
              <Text
                style={{ fontSize: px2dp(11), color: color.palette.textGray, marginEnd: px2dp(4) }}
              >
                所有{this.props.item.title}滚球(9)
              </Text>
              <Image
                style={{ height: px2dp(10), width: px2dp(6) }}
                source={images.home.goRightGrayIcon}
              />
            </View>
          </TouchableOpacity>
        </View>
        <View
          style={{
            height: px2dp(1),
            backgroundColor: color.palette.bgMain,
            marginStart: px2dp(12),
            marginEnd: px2dp(12)
          }}
        />
      </View>
    )
  }
}
